<template>
  <div>
    <el-dialog
      title="添加合同"
      :visible="dialogVisible"
      width="600px"
      :before-close="handleClose"
    >
      <div class="form-container">
        <el-form ref="formData" :model="rentForm" :rules="rules" label-width="120px">
          <el-form-item label="租赁楼宇" prop="buildingId">
            <el-select v-model="rentForm.buildingId" placeholder="请选择租赁楼宇">
              <el-option v-for="item in list" :key="item.id" :label="item.name" :value="item.id">
                {{ item.name }}
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="租赁起止日期" prop="rentTime">
            <el-date-picker
              v-model="rentForm.rentTime"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              value-format="yyyy-MM-dd"
            />
          </el-form-item>
          <el-form-item label="租赁合同" prop="businessLicenseUrl">
            <el-upload
              action="#"
              :http-request="uploadRequest"
              :before-upload="beforerUpload"
            >
              <el-button size="small"><i class="el-icon-upload2" />上传文件</el-button>
              <div slot="tip" class="el-upload__tip">支持扩展名：.doc .docx .pdf, 文件大小不得超过5MM</div>
            </el-upload>

          </el-form-item>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="handleClose">取 消</el-button>
        <el-button type="primary" @click="submitBtn">确 定</el-button>
      </span>
    </el-dialog>

  </div>
</template>
<script>
import { getBuildingList, addBuilding } from '@/api/Building'
import { uploadLicense } from '@/api/Enterprise'
export default {
  name: 'AddContract',
  props: {
    dialogVisible: {
      type: Boolean,
      default: false
    },
    id: {
      type: Number,
      default: null
    }
  },
  data() {
    return {
      list: [],
      rentForm: {
        businessLicenseUrl: '',
        contractUrl: '',
        contractId: null,
        enterpriseId: null,
        type: 0,
        rentTime: [],
        buildingId: ''
      },
      rules: {
        name: [
          { required: true, message: '请输入租赁楼宇', trigger: 'blur' }
        ],
        type: [
          { required: true, message: '请输入租赁起止日期', trigger: 'blur' }
        ],
        businessLicenseUrl: [
          { required: true, message: '请上传租赁合同', trigger: 'blur' }
        ]
      }
    }
  },
  watch: {
    id(newId) {
      if (newId) {
        this.rentForm.enterpriseId = newId
      }
    }
  },
  created() {
    this.getBuildingListMethod()
  },
  methods: {
    async submitBtn() {
      await this.$refs.formData.validate()
      const { buildingId, contractId, contractUrl, enterpriseId, type } = this.rentForm
      console.log(this.rentForm)
      await addBuilding({
        buildingId, contractId, contractUrl, enterpriseId, type,
        startTime: this.rentForm.rentTime[0],
        endTime: this.rentForm.rentTime[1]
      })
      this.$message.success('添加成功')
      this.handleClose()
    },
    async getBuildingListMethod() {
      const { data } = await getBuildingList()
      this.list = data
    },
    handleClose() {
      this.$emit('update:dialogVisible', false)
    },
    async uploadRequest(fileData) {
      const { file } = fileData
      const formData = new FormData()
      formData.append('file', file)
      formData.append('type', 'contract')

      // 上传文件
      const { data } = await uploadLicense(formData)
      this.rentForm.contractUrl = data.url
      this.rentForm.contractId = data.id
      this.rentForm.businessLicenseUrl = data.url
      this.rentForm.type = 0
    },
    beforerUpload(file) {
      const fileTypeList = ['doc', 'docx', 'pdf', 'rar', 'zip']
      const isfile = fileTypeList.includes(file.name.split('.')[1])
      const isLt5M = file.size / 1024 / 1024 < 5

      if (!isfile) {
        this.$message.error('只能上传.doc .docx .pdf格式的文件!')
      }
      if (!isLt5M) {
        this.$message.error('上传文件大小不能超过 5MB!')
      }
      return isfile && isLt5M
    }
  }
}
</script>
<style>
</style>
